import React from 'react';
import { Flex, Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;
import { Outlet } from "react-router";
import Menu from '@/components/menus/Menu';

export default function Home() {

  const headerStyle: React.CSSProperties = {
   
    color: '#fff',
    height: 64,
     padding:'10px 10px',
    lineHeight: '0px',
    backgroundColor: '#4096ff',
  };
  
  const contentStyle: React.CSSProperties = {
 
    backgroundColor: '#fff',
    padding:'30px',
    height:'calc(100vh - 64px)',
    overflowY:'auto'
  };
  
  const siderStyle: React.CSSProperties = {
   
    width:"95px",
    backgroundColor: "#f4f4f4",
    height:'calc(100vh - 64px)',
    overflowY:'auto'
  };
  
 
  
  const layoutStyle: React.CSSProperties  = {
 
    width: '100%',
    minHeight: '100vh',

  };
  return (
 
<Layout style={layoutStyle}>
<Header  style={headerStyle}>Header</Header>
<Layout>
  <Sider width={90} style={siderStyle}>
     <Menu></Menu>
  </Sider>
  <Content style={contentStyle}>
  <Outlet />
  </Content>
</Layout>
 
</Layout>
  );
}